<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter="">
                <div class="layui-form-item">
                  <label class="layui-form-label">商品名称</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="name"
                      placeholder="输入商品名称"
                      v-model="itemData.name"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">商品图片</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <div class="layui-upload">
                        <button
                          type="button"
                          class="layui-btn"
                          id="layuiadmin-upload-useradmin"
                        >
                          选择文件
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">图片预览</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <img
                        id="img"
                        :src="
                          itemData.logoUrl
                            ? itemData.logoUrl
                            : require('@/assets/zwyl.jpg')
                        "
                        style="width:100px;height:100px;"
                      />
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">所选门店</label>
                  <div class="layui-input-inline">
                    <select name="shopId" lay-filter="shopId" v-model="itemData.shopId">
                      <option v-for="item in shoplist" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">商品分组</label>
                  <div class="layui-input-inline">
                    <select name="itemGroupId" lay-filter="itemGroupId" v-model="itemData.itemGroupId">
                      <option value="">请选择</option>
                      <option v-for="item in grouplist" :value="item.id">{{item.groupName}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">经营类目</label>
                  <div class="layui-input-inline">
                    <select name="categoryId" lay-filter="categoryId" v-model="itemData.categoryId">
                      <option value="">请选择</option>
                      <option v-for="item in jylmlist" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">商品状态</label>
                  <div class="layui-input-inline">
                    <select
                      name="activeStatus"
                      lay-filter="activeStatus"
                      v-model="itemData.activeStatus"
                    >
                    <option value="">请选择</option>
                      <option value="ENABLE">正常销售</option>
                      <option value="DISABLE">下架</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">推荐首页</label>
                  <div class="layui-input-inline">
                    <select
                      name="ranking"
                      lay-filter="ranking"
                      v-model="itemData.ranking"
                    >
                      <option value="1">是</option>
                      <option value="0">否</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">库存</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="stockAmount"
                      placeholder="输入商品库存"
                      v-model="itemData.saleStock.stockAmount"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">售价</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="specialPrice"
                      placeholder=""
                      v-model="itemData.price.specialPrice"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">原价</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="marketPrice"
                      placeholder="非必填,默认售价1.5倍"
                      v-model="itemData.price.marketPrice"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">产品重量</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="weight"
                      placeholder="(克),非必填,不填则默认"
                      v-model="itemData.weight"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">详情概述</label>
                  <div class="layui-input-block">
                  	<textarea id="demo" style="display: none;">{{itemData.samllDescription}}</textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">轮播图</label>
                  <div class="layui-input-block">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test2">多图片上传</button>
                      <button type="button" class="layui-btn layui-btn-warm" @click="delimg">清除图片</button>
                      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图：
                      <div class="layui-upload-list" style="width: 100%;" id="demo2">
                      	<ul>
                      		<li style="display:inline-block;margin-right:10px;" v-for='item in createItemPictureList'>
                      			<img width="100" height="100" :src='item.pictureUrl'>
                      			<input type="text" v-model="item.ranking" style="display:block;width:98px;height:30px;margin-top:10px;border:1px solid #ccc;text-align: center;">
                      		</li>
                      	</ul>
                      	
                      </div>
                      </blockquote>
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button
                      class="layui-btn layui-btn-normal"
                      lay-submit
                      lay-filter="setmyinfo"
                      @click="confirmOk"
                    >
                      确认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "shopmalladd",
  data() {
    return {
      dealerId: localStorage.getItem("dealerId"),
      createItemPictureList:[],
      itemData: {
        name: "", //商品名称
        logoUrl: "", //商品图片
        activeStatus: "ENABLE",
        itemPictureList: [
          {
            pictureUrl: "",
            ranking: ""
          }
        ], //详情图
        samllDescription:'',
        ranking: "0",
        shopId: "", //门店
        itemGroupId: "", //组
        categoryId: "", //类目
        weight: "", //商品重量
        // stockAmount: '',//库存
        saleStock: { stockAmount: "" }, //库存
        price: {
          marketPrice: "", //原价
          specialPrice: "" //售价
        }
      },
      layedit:'',
    	layeditindex:'',
      shoplist: [],
      grouplist: [], //分组
      jylmlist: [], //经营类目
      imgsrt:'',
      //shopId:localStorage.getItem("shopId"),
      goodsId: "" //商品ID
    };
  },
  mounted() {
    var _this = this;
    window.getdates = this.getdates;
    layui.use('layedit', function(){
		  var layedit = layui.layedit;
		  layedit.set({
			  uploadImage: {
			    url: imguploadurl,
			    type: 'post',
          data:{
          	type:3
          }
			  }
			});
			_this.layedit=layui.layedit
		  var index=layedit.build('demo');
		  _this.layeditindex=index;
		});
    layui.use("upload", function() {
      var upload = layui.upload;
      var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2
        },
        url:imguploadurl, //上传接口
        done: function(res) {
          layer.msg("上传成功");
          _this.itemData.logoUrl = res.msg;
        },
        error: function() {
          layer.msg("上传失败");
        }
      });
      
      upload.render({
        elem: "#test2",
        data: {
          type: 2
        },
        url: "http://storage.g2ma.com/imgUpload/multi",
        multiple: true,
        before: function(obj) {},
        done: function(res,index) {
          layer.msg("上传成功");
          var img = _this.createItemPictureList;
          var obj={
	            pictureUrl:res.msg,
	            ranking:0
	          }
          img.push(obj)
          _this.createItemPictureList =img;
          
        }
        
      });
    });
    this.getshop(); //门店
    this.getjylm(); //经营类目
    
  },
  methods: {
    getdates: function(data) {
      //回选详情
      var _this = this;
      _this.goodsId = data.id;
      var url = "/mall/bapi/v1.9/item/" + data.shop.shopId + "/" + data.id;
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        //alert(JSON.stringify(ret))
        _this.itemData = ret.data;
        _this.itemData.price.marketPrice = ret.data.price.marketPrice /100;
        _this.itemData.price.specialPrice = ret.data.price.specialPrice /100;
        _this.itemData.weight=ret.data.itemSkuList[0].weight
        if (ret.data.itemDescription) {
          
          var src = ret.data.itemDescription.samllDescription;
          setTimeout(function(){
	          _this.layedit.setContent(_this.layeditindex,src, false);
	        },600)
        } 
        
        _this.createItemPictureList = ret.data.itemPictureList;
      });
    },
    getshop: function() {
      var _this = this;
      var url = "/shop/papi/v1.9/shops?dealerId.equals="+_this.dealerId + '&page=0&size=100';
      ajaxRequest(url, "GET", "json", '', function(ret, err) {
        _this.shoplist = ret.data.list;
        _this.itemData.shopId = ret.data.list[0].id;
        _this.getgroup();
      });
    },
    getjylm: function() {
      //经营类目
      var _this = this;
      var shopId = _this.itemData.shopId;
      //var url='/commodity/bapi/v2.0/categories/self'
      var url = "/mall/bapi/v1.9/shop/category/" + shopId;
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        _this.jylmlist = ret.data;
      });
    },
    getgroup: function() {
      var _this = this;
      var shopId = _this.itemData.shopId;
      //var url="/mall/bapi/v1.9/item-group/"+shopId //门店下
      var url = "/mall/bapi/v1.9/item-group/" + shopId + "/enable"; //查门店下启用的
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        //alert(JSON.stringify(ret))
        _this.grouplist = ret.data;
      });
    },
    delimg: function() {
      this.createItemPictureList=[];
    },
    confirmOk: function() {
      var _this = this;
      var len = $(".a").length;
      for (var i = 0; i < len; i++) {
        if (
          $(".a")
            .eq(i)
            .val() == "" ||
          $(".a")
            .eq(i)
            .val() <= 0
        ) {
          var msg = $(".a")
            .eq(i)
            .attr("placeholder");
          layer.msg("请输入正确的" + msg);
          return;
        }
      }
      if (!_this.itemData.categoryId) {
        layer.msg("请选择分类");
        return false;
      }
      if (!_this.itemData.logoUrl) {
        layer.msg("请上传商品图片");
        return false;
      }
      //		if(!this.itemData.detailcontent){
      //			layer.msg('请上传商品详情图片');
      //			return false;
      //		}
      var specialPrice = _this.itemData.price.specialPrice;
      if (_this.itemData.price.marketPrice) {
        var marketPrice = _this.itemData.price.marketPrice;
      } else {
        var marketPrice = specialPrice * 1.5;
      }
      var price = {
        specialPrice: specialPrice*100, //售价
        marketPrice: marketPrice*100 //原价
      };
      var content=this.layedit.getContent(this.layeditindex);
      content=content.replace(/<img src/g,'<img style="width:100%;display:block" src');
      if (_this.goodsId) {
        //编辑
        var hat = "PUT";
        var num = 1;
        var createItemPictureList = _this.createItemPictureList;
        var itemPictureList = _this.itemData.itemPictureList;
        var dates = {
          name: _this.itemData.name,
          logoUrl: _this.itemData.logoUrl, //logo
          shopId: _this.itemData.shopId,
          itemGroupId: _this.itemData.itemGroupId, //分组
          categoryId: _this.itemData.categoryId, //类目
          activeStatus: _this.itemData.activeStatus,
          ranking: _this.itemData.ranking,
          stockAmount: _this.itemData.saleStock.stockAmount, //kc
          price: price,
          weight: _this.itemData.weight,
          itemPictureUpdateDTOList:_this.createItemPictureList,
          largeDescription: "",
          samllDescription:content,
          slogan: "",
          unitName: "",
          editStatus: "PUBLISHED",
          shopRecommend: "0",
          createItemSkuList: [],
          createiIemPropertyList: [],
          createItemSpecificationList: [],
          id: _this.goodsId,
          itemPictureFlag: true,
          itemPropertyFlag: false,
          itemSpSkuFlag: false
          //
        };
        var parr=this.itemData.itemSkuList;
        var narr=[];
        for(var i=0;i<parr.length;i++){
        	var obj={
        		stockAmount:_this.itemData.saleStock.stockAmount,
        		id:parr[i].id
        	}
        	narr.push(obj)
        }
        dates.itemSkuUpdateDTOList=narr
      } else {
        var hat = "POST";
        var dates = {
          name: _this.itemData.name,
          logoUrl: _this.itemData.logoUrl, //logo
          shopId: _this.itemData.shopId,
          itemGroupId: _this.itemData.itemGroupId, //分组
          categoryId: _this.itemData.categoryId, //类目
          activeStatus: _this.itemData.activeStatus,
          ranking: _this.itemData.ranking,
          stockAmount: _this.itemData.saleStock.stockAmount, //kc
          price: price,
          weight: _this.itemData.weight,
          createItemPictureList:_this.createItemPictureList,
          largeDescription: "",
          samllDescription:content, //str
          slogan: "",
          unitName: "",
          editStatus: "PUBLISHED",
          shopRecommend: "0",
          createItemSkuList: [],
          createiIemPropertyList: [],
          createItemSpecificationList: []
        };
      }
      var url = "/mall/bapi/v1.9/item";
              // alert(JSON.stringify(dates))  
      ajaxRequest(url, hat, "json", dates, function(ret, err) {
        layer.msg("操作成功");
        setTimeout(function() {
          // _this.$router.push({ path: '/shopmallList' })
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    }
  },
  updated: function() {
    var _this = this;
    layui.use("form", function() {
      var form = layui.form;
      form.render();
      form.on("select(categoryId)", function(data) {
        //类目
        _this.itemData.categoryId = data.value;
      });
      form.on("select(itemGroupId)", function(data) {
        //分组
        _this.itemData.itemGroupId = data.value;
      });
      form.on("select(activeStatus)", function(data) {
        //状态
        _this.itemData.activeStatus = data.value;
      });
      form.on("select(ranking)", function(data) {
        //推荐
        _this.itemData.ranking = data.value;
      });
      form.on("select(shopId)", function(data) {
        //门店
        _this.itemData.shopId = data.value;
      });
    });
  }
};
</script>
<style>
#J_imageView img {
  width: 400px;
  display: block;
}
.fllist ul {
  display: inline-block;
  width: 20%;
  height: 250px;
  margin-right: 1%;
  overflow: hidden;
  overflow-y: scroll;
  border: 1px solid #eee;
}
.fllist ul li {
  height: 30px;
  line-height: 30px;
  padding: 5px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.fllist ul li.cur {
  background-color: #3276df;
  color: #fff;
}
#demo2 img {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
}
</style>
